<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>后端管理 - 家具订单管理系统</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-if="loading" class="loading-container">
      <div style="text-align: center; padding: 50px;">
        <div style="font-size: 18px;">加载中...</div>
      </div>
    </div>
    <div v-else>
      <div class="header">
        <div class="container">
          <h1>🛋️ 家具订单管理系统 - 后端管理</h1>
          <p>完整的订单管理功能 | 新增、编辑、删除、导出</p>
        </div>
      </div>

      <div class="container">
        <!-- 操作栏 -->
        <div class="action-bar">
          <el-button type="primary" @click="showAddDialog">➕ 新增订单</el-button>
          <el-button type="success" @click="exportOrders">📥 导出Excel</el-button>
        </div>

        <!-- 订单列表 -->
        <div class="content-card">
          <el-table
            :data="orders"
            style="width: 100%"
            stripe
            border
            :default-sort="{ prop: 'orderDate', order: 'descending' }"
          >
            <el-table-column prop="orderDate" label="下单日期" width="120" sortable></el-table-column>
            <el-table-column prop="orderNumber" label="单号" width="150" sortable></el-table-column>
            <el-table-column prop="style" label="款式" min-width="180"></el-table-column>
            <el-table-column prop="size" label="尺寸" width="140"></el-table-column>
            <el-table-column prop="quantity" label="数量" width="80" align="center"></el-table-column>
            <el-table-column prop="unitPrice" label="单价" width="100" align="right">
              <template #default="scope">
                ¥{{ scope.row.unitPrice.toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column prop="totalAmount" label="总额" width="120" align="right">
              <template #default="scope">
                <span class="amount-cell">¥{{ scope.row.totalAmount.toFixed(2) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="160" fixed="right">
              <template #default="scope">
                <el-button type="primary" size="small" @click="editOrder(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="deleteOrder(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 新增/编辑订单对话框 -->
      <el-dialog
        v-model="dialogVisible"
        :title="dialogTitle"
        width="600px"
        :close-on-click-modal="false"
      >
        <el-form
          :model="orderForm"
          :rules="formRules"
          ref="orderFormRef"
          label-width="100px"
          class="order-form"
        >
          <el-form-item label="下单日期" prop="orderDate">
            <el-date-picker
              v-model="orderForm.orderDate"
              type="date"
              placeholder="选择日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              style="width: 100%"
            />
          </el-form-item>

          <el-form-item label="单号" prop="orderNumber">
            <el-input v-model="orderForm.orderNumber" placeholder="请输入单号">
              <template #append>
                <el-button @click="generateNumber">🔄 自动生成</el-button>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="款式" prop="style">
            <el-input v-model="orderForm.style" placeholder="请输入家具款式"></el-input>
          </el-form-item>

          <el-form-item label="尺寸" prop="size">
            <el-input v-model="orderForm.size" placeholder="例如: 1800x800x750"></el-input>
          </el-form-item>

          <el-form-item label="数量" prop="quantity">
            <el-input-number
              v-model="orderForm.quantity"
              :min="1"
              :max="9999"
              @change="calculateTotal"
              style="width: 100%"
            ></el-input-number>
          </el-form-item>

          <el-form-item label="单价" prop="unitPrice">
            <el-input-number
              v-model="orderForm.unitPrice"
              :min="0"
              :precision="2"
              :step="100"
              @change="calculateTotal"
              style="width: 100%"
            ></el-input-number>
          </el-form-item>

          <el-form-item label="总额">
            <el-input
              :model-value="totalAmount"
              disabled
              style="width: 100%"
            >
              <template #prepend>¥</template>
            </el-input>
          </el-form-item>
        </el-form>

        <template #footer>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitOrder">确定</el-button>
        </template>
      </el-dialog>
    </div>
  </div>

  <script type="module" src="/src/admin.js"></script>
</body>
</html>
